<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/template.xhtml">
    <ui:define name="content">
        <h:form id="resultForm">
            <div class="container">
                <h:panelGroup id="inputPanel" layout="block">
                    <div><p:messages showIcon="true" globalOnly="true" id="messages"/></div>

                    <div style="display: inline; text-align: left; font-size: 30px">

                        <p:autoComplete
                                style="font-size: 20px; box-shadow:none; outline: medium none; transition: none 0s ease 0s;"
                                forceSelection="true" placeholder="Opponent"
                                value="#{headToHeadBean.player1Name}" required="true"
                                completeMethod="#{headToHeadBean.selectablePlayerNames}">
                        </p:autoComplete>
                    </div>
                    <div style="font-size: 15px; display: inline;">vs</div>

                    <div style="display: inline; text-align: left; font-size: 30px">
                        <p:autoComplete
                                style="font-size: 20px; box-shadow:none; outline: medium none; transition: none 0s ease 0s;"
                                forceSelection="true" placeholder="Opponent"
                                value="#{headToHeadBean.player2Name}" required="true"
                                completeMethod="#{headToHeadBean.selectablePlayerNames}">

                        </p:autoComplete>
                    </div>
                    <div style="display: inline">
                        <p:commandButton value="Go!" actionListener="#{headToHeadBean.submit}"
                                         update="inputPanel results"/>
                    </div>
                </h:panelGroup>

                <h:panelGroup id="results" layout="block" style="position: relative; left:-53px">
                    <h:panelGroup
                            rendered="#{headToHeadBean.player1Name ne null and headToHeadBean.player2Name ne null}">
                        <div style="display: inline; text-align: left; font-size: 70px">
                            #{headToHeadBean.player1Wins}
                        </div>

                        <div style="display: inline; text-align: left; font-size: 70px">
                            -
                        </div>

                        <div style="display: inline; text-align: left; font-size: 70px">
                            #{headToHeadBean.player2Wins}
                        </div>

                        <div>
                            <table cellpadding="5"
                                   style="margin: 0 auto; text-align: left; font-style: italic; font-size: 22px;">
                                <ui:repeat value="#{headToHeadBean.matches}" var="match">
                                    <tr>
                                        <td style="color: lightgrey"><h:outputText value="#{match.date}">
                                            <f:convertDateTime pattern="yyyy-MM-dd" timeZone="CET"/>
                                        </h:outputText></td>
                                        <td><h:outputText value="#{match.player1.fullName()}"
                                                          style="#{match.homeVictory() ? 'color:gold; text-shadow: 1px 1px 1px #000000;' : ''}"/>
                                        </td>
                                        <td><h:outputText style="color: lightgrey" value="vs"/></td>
                                        <td><h:outputText value="#{match.player2.fullName()}"
                                                          style="#{match.awayVictory() ? 'color:gold; text-shadow: 1px 1px 1px #000000;' : ''}"/>
                                        </td>
                                        <td><h:outputText value="#{match.setsAsString()}"/></td>
                                    </tr>
                                </ui:repeat>
                            </table>
                        </div>
                    </h:panelGroup>
                </h:panelGroup>
            </div>
        </h:form>
    </ui:define>
</ui:composition>
</html>
